<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { id } from 'element-plus/es/locales.mjs';

const data = ref({
  id:'',
  pipeCode: '',
  pipeName: '',
  pipeType: '',
  length: '',
  depth: '',
  diameter: '',
  material: '',
  pressureRatin: '',
  remark: '',
  startPointFormatted: '',
  endPointFormatted: '',
  risk:'',

});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      if (modalData) {
        // 解析 startPoint 和 endPoint
        const parsePoint = (point: string) => {
          const match = point.match(/POINT \(([-+]?\d*\.?\d+) ([-+]?\d*\.?\d+)\)/);
          if (match) {
            const longitude = match[1];
            const latitude = match[2];
            return `经度：${longitude}，纬度： ${latitude}`;
          }
          return '';
        };

        const startPointFormatted = parsePoint(modalData.startPoint);
        const endPointFormatted = parsePoint(modalData.endPoint);

        // 更新 data.value
        data.value = {
          ...data.value,
          ...modalData,
          startPointFormatted,
          endPointFormatted,
        };
      }
    }
  },
  title: 'Tube Modal',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>管线ID:</strong> {{ data.id }}</p>
        <p><strong>管线编号:</strong> {{ data.pipeCode }}</p>
        <p><strong>管线名称:</strong> {{ data.pipeName }}</p>
        <p><strong>管线类型:</strong> {{ data.pipeType }} </p>
        <p><strong>管线长度:</strong> {{ data.length }}米</p>
        <p><strong>管线深度:</strong> {{ data.depth }}米</p>
        <p><strong>管线直径:</strong> {{ data.diameter }}毫米</p>
        <p><strong>管线材质:</strong> {{ data.material }}</p>
        <p><strong>管线起始点坐标:</strong> {{ data.startPointFormatted }}</p>
        <p><strong>管线终止点坐标:</strong> {{ data.endPointFormatted }}</p>
        <p><strong>风险:</strong> {{ data.risk }}</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}
</style>
